<!--
 * @Author: 赵京涛 z19472333952022@163.com
 * @Date: 2024-10-08 09:40:41
 * @LastEditors: 赵京涛 z19472333952022@163.com
 * @LastEditTime: 2024-10-08 09:40:41
 * @projectName: HeBeiHaiYangData
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki
-->
<template>
  <el-button
    :size="size"
    :type="isShowType ? formatterType : ''"
    :plain="plain"
    :round="round"
    :circle="yuan"
    :loading="loading"
    :disabled="disabled"
    :icon="icon"
    :autofocus="isShowFocus"
    :native-type="nativeType"
    @click="debouncedClickHandler"
  >
    {{ label }}
  </el-button>
</template>

<script>
import { warningMessage } from '@/hooks'

export default {
  name: 'LvButton',
  props: {
    size: { type: String, default: 'medium' }, // 尺寸
    type: { type: String, default: '' }, // 按钮类型
    label: { type: String, default: '' }, // 默认字体展示
    plain: { type: Boolean, default: false }, // 是否是朴素按钮
    round: { type: Boolean, default: false }, // 是否是圆角按钮
    yuan: { type: Boolean, default: false }, // 是否是圆形按钮
    loading: { type: Boolean, default: false }, // 是否是加载中状态
    disabled: { type: Boolean, default: false }, // 是否处于禁止状态
    icon: { type: String, default: '' }, // 图标类名
    isShowFocus: { type: Boolean, default: false }, // 是否默认聚焦
    nativeType: { type: String, default: 'button' }, // 原生type属性：可选值：button | submit | reset
    msg: { type: String, default: '' } // 写上此属性之后就默认展示出他弹窗，一般用于删除操作
  },
  data() {
    return {
      formatterType: '', // 重制type
      lastClickTime: 0, // 最后一次点击的时间
      isShowType: true // 是否是显示type按钮类型
    }
  },
  watch: {
    type: {
      handler(value) {
        const _objAssign = {
          p: 'primary',
          s: 'success',
          w: 'warning',
          d: 'danger',
          i: 'info',
          t: 'text'
        }
        // 先将 formatterType 置为空
        this.formatterType = ''
        for (const keys in _objAssign) {
          if (value && value === keys) {
            this.formatterType = _objAssign[keys]
            this.isShowType = value !== ''
            // 匹配到对应的 value 后就退出循环
            break
          }
        }
      },
      immediate: true
    }
  },
  methods: {
    /**
     * 使用防抖函数
     */
    debouncedClickHandler() {
      // 获取当前时间
      const currentTime = new Date().getTime()
      // 如果距离上次点击时间超过 1500 毫秒（1.5秒）
      if (currentTime - this.lastClickTime > 1000) {
        // 更新上次点击时间为当前时间
        this.lastClickTime = currentTime
        // 如果消息为空
        if (this.msg.length === 0) {
          // 触发点击事件
          this.$emit('click')
        } else if (this.msg && this.msg.length > 0) {
          // 否则，显示确认对话框
          this.$confirm(this.msg, '温馨提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              // 确认后触发点击事件
              this.$emit('click')
            })
            .catch(() => {
              // 取消后触发取消事件
              this.$emit('cancel')
            })
        }
      } else if (currentTime - this.lastClickTime <= 1500) {
        // 操作未在节流时间外，就需要提示了
        warningMessage('操作太快啦~')
      }
    }
  }
}
</script>
